<template>
  <div class="filter-device-container">
    <van-tree-select
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
        <!-- 设备类型 -->
        <ul
          class="filter-list"
          v-if="active === 0"
        >
          <li
            :class="{'color-primary': item.checked}"
            v-for="(item, index) in typeData"
            :key="item.value"
            @click="chooseType(index)"
          >
            <span>{{ item.text }}</span>
            <van-icon
              name="success"
              v-show="item.checked"
            />
          </li>
        </ul>
        <!-- 设备状态 -->
        <ul
          class="filter-list"
          v-if="active === 1"
        >
          <li
            :class="{'color-primary': item.checked}"
            v-for="(item, index) in statusData"
            :key="item.value"
            @click="chooseStatus(index)"
          >
            <span>{{ item.text }}</span>
            <van-icon
              name="success"
              v-show="item.checked"
            />
          </li>
        </ul>
        <!-- 物模型 -->
        <ul
          class="filter-list"
          v-if="active === 2"
        >
          <li
            :class="{'color-primary': item.checked}"
            v-for="(item, index) in modelData"
            :key="item.value"
            @click="chooseModel(index)"
          >
            <span>{{ item.text }}</span>
            <van-icon
              name="success"
              v-show="item.checked"
            />
          </li>
        </ul>
        <!-- 设备分组 -->
        <ul
          class="filter-list"
          v-if="active === 3"
        >
          <li
            v-show="showBack"
            @click="backFn"
          >
            <p>
              <van-icon name="revoke" />
              上一级
            </p>
          </li>
          <template v-for="(item, index) in groupData">
            <li
              v-if="item.child && item.child.length > 0"
              :key="item.value"
              @click="chooseGroupNext(item)"
            >
              <span>{{ item.text }}</span>
              <van-icon name="arrow" />
            </li>
            <li
              :class="{'color-primary': item.checked}"
              v-else
              :key="item.value"
              @click="chooseGroup(index)"
            >
              <span>{{ item.text }}</span>
              <van-icon
                name="success"
                v-show="item.checked"
              />
            </li>
          </template>
        </ul>
      </template>
    </van-tree-select>

    <div class="operate-box">
      <div
        class="operate-btn cancel-btn"
        @click="cancelFn"
      >取 消</div>
      <div
        class="operate-btn"
        @click="submit"
      >确 定</div>
    </div>
  </div>
</template>

<script>
import { TreeSelect } from 'vant';
import { getModelList, getDeviceGroupList } from '@/api/deviceManage.js';

export default {
  name: 'FilterDevice',
  components: {
    [TreeSelect.name]: TreeSelect
  },
  data() {
    return {
      active: 0,
      items: [{ text: '设备类型' }, { text: '设备状态' }, { text: '物模型' }, { text: '设备分组' }],
      typeId: '',
      typeName: '',
      typeData: [],
      status: '',
      statusName: '',
      statusData: [],
      modelId: '',
      modelName: '',
      modelData: [],
      groupId: '',
      groupName: '',
      groupData: [],
      deviceGroupList: [],
      showBack: false,
      nextIndex: 0,
      backData: []
    };
  },
  created() {
    this.initCreateData();
  },
  methods: {
    // 初始化筛选条件数据
    initCreateData() {
      this.createTypeData();
      this.createStatusData();
      this.createModelData();
      this.createGroupData();
    },
    // 创建设备类型数据
    createTypeData() {
      let typeArr = ['不限', '搬运类', '输送类', '包装类', '其它类'];
      typeArr.map((item, index) => {
        this.typeData.push({
          text: item,
          value: index,
          checked: false
        });
      });
    },
    // 选择类型
    chooseType(index) {
      this.typeData.map((item, idx) => {
        if (idx !== index) {
          item.checked = false;
        }
      });
      this.typeData[index].checked = !this.typeData[index].checked;
      if (this.typeData[index].checked) {
        this.typeId = index === 0 ? '' : this.typeData[index].value;
        this.typeName = this.typeData[index].text;
      } else {
        this.typeId = '';
        this.typeName = '';
      }
    },
    // 创建设备状态数据
    createStatusData() {
      this.statusData = [
        {
          text: '全部',
          value: '',
          checked: false
        },
        {
          text: '离线',
          value: 1,
          checked: false
        },
        {
          text: '在线',
          value: 2,
          checked: false
        },
        {
          text: '报警',
          value: 4,
          checked: false
        }
      ];
    },
    // 选择设备状态
    chooseStatus(index) {
      this.statusData.map((item, idx) => {
        if (idx !== index) {
          item.checked = false;
        }
      });
      this.statusData[index].checked = !this.statusData[index].checked;
      if (this.statusData[index].checked) {
        this.status = this.statusData[index].value;
        this.statusName = this.statusData[index].text;
      } else {
        this.status = '';
        this.statusName = '';
      }
    },
    // 创建物模型数据
    createModelData() {
      getModelList().then(res => {
        this.modelData = [
          {
            text: '全部',
            value: '',
            checked: false
          }
        ];
        if (res.data && res.data.length) {
          res.data.map(item => {
            this.modelData.push({
              text: item.name,
              value: item.id,
              checked: false
            });
          });
        }
      });
    },
    // 选择物模型
    chooseModel(index) {
      this.modelData.map((item, idx) => {
        if (idx !== index) {
          item.checked = false;
        }
      });
      this.modelData[index].checked = !this.modelData[index].checked;
      if (this.modelData[index].checked) {
        this.modelId = this.modelData[index].value;
        this.modelName = this.modelData[index].text;
      } else {
        this.modelId = '';
        this.modelName = '';
      }
    },
    // 创建设备分组数据
    createGroupData() {
      getDeviceGroupList().then(res => {
        this.groupData = [
          {
            text: '全部',
            value: '',
            checked: false
          }
        ];
        if (res.data.list && res.data.list.length) {
          this.deviceGroupList = res.data.list;
          res.data.list.map(item => {
            this.groupData.push({
              text: item.name,
              value: item.id,
              checked: false,
              child: item.child || []
            });
          });
        }
      });
    },
    // 返回上一级
    backFn() {
      this.backData.splice(this.nextIndex, 1);
      this.nextIndex--;
      this.groupData = this.backData[this.nextIndex];
      if (this.nextIndex === 0) {
        this.showBack = false;
        this.backData = [];
      }
    },
    // 选择下一级分组
    chooseGroupNext(item) {
      this.showBack = true;
      this.nextIndex++;
      this.backData.push(this.groupData);
      this.groupData = [];
      item.child.map(ii => {
        this.groupData.push({
          text: ii.name,
          value: ii.id,
          checked: false,
          child: ii.child || []
        });
      });
    },
    // 选择设备分组数据
    chooseGroup(index) {
      this.groupData.map((item, idx) => {
        if (idx !== index) {
          item.checked = false;
        }
      });
      this.backData.map(item => {
        item.map(subItem => {
          subItem.checked = false;
        });
      });
      this.groupData[index].checked = !this.groupData[index].checked;
      if (this.groupData[index].checked) {
        this.groupId = this.groupData[index].value;
        this.groupName = this.groupData[index].text;
      } else {
        this.groupId = '';
        this.groupName = '';
      }
    },
    // 确定
    submit() {
      let data = [
        {
          id: this.typeId,
          name: this.typeName,
          category: 'type'
        },
        {
          id: this.status,
          name: this.statusName,
          category: 'status'
        },
        {
          id: this.modelId,
          name: this.modelName,
          category: 'model'
        },
        {
          id: this.groupId,
          name: this.groupName,
          category: 'group'
        }
      ];
      this.$emit('submit', data);
    },
    // 取消
    cancelFn() {
      this.$parent.showFilterDevice = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-device-container {
  position: absolute;
  top: 1.226667rem;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 1.226667rem);
  background-color: #fff;

  .van-tree-select {
    flex: 1;
  }

  ::v-deep .van-sidebar-item--select::before {
    background-color: var(--color-primary);
  }

  .filter-list {
    padding: 0.16rem 0.426667rem;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 0.32rem 0;
      border-bottom: 1px solid var(--border-color);
    }
  }

  .operate-box {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.213333rem 0.426667rem;
    background-color: #fff;

    .operate-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 4.32rem;
      height: 1.066667rem;
      color: #fff;
      font-size: 0.426667rem;
      border-radius: 0.106667rem;
      background-color: var(--color-primary);

      &.cancel-btn {
        color: var(--color-deep-gray);
        background-color: #fff;
        border: 1px solid var(--border-color);
      }
    }
  }
}
</style>